<template>
    <div ref="refPie"></div>
</template>

<script setup lang="ts">
import { Pie } from '@antv/g2plot'
import { onMounted, ref } from 'vue'

const refPie = ref<HTMLElement>()
const piePlot = ref<Pie>()
const data = [
    { type: '分类一', value: 27 },
    { type: '分类二', value: 25 },
    { type: '分类三', value: 18 },
    { type: '分类四', value: 15 },
    { type: '分类五', value: 10 },
    { type: '其他', value: 5 },
]
function PieRender() {
    if (!refPie.value) return
    piePlot.value = new Pie(refPie.value, {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 0.9,
        label: {
            type: 'inner',
            offset: '-30%',
            content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            style: {
                fontSize: 14,
                textAlign: 'center',
            },
        },
        interactions: [{ type: 'element-active' }],
    })
    piePlot.value.render()
}
onMounted(() => {
    PieRender()
})
</script>